<template>
  <div class="_wrap">
    <div class="bigTit"><span>校领导情况</span></div>
    <div class="_body">
      <div class="total">
        <div class="img">
          <img src="~@/assets/imgPersonnel/icon3.svg">
          <img src="~@/assets/imgPersonnel/iconBg2.svg">
        </div>
        <div class="inner">
          <span class="label">校领导总人数：</span>
          <count-to ref="countTo" class="val" :start-val="0" :end-val="total" :duration="3600" />
          <span class="unit">(人)</span>
        </div>
      </div>

      <div class="_progress">
        <div class="item" v-for="(item, i) in list" :key="i">
          <div class="text">
            <div class="label">{{item.label}}</div>
            <div class="value">{{item.value}}<span>人</span></div>
          </div>
          <div class="_bar" :style="{'--width': formatWidth(item.value,total)}"></div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import countTo from 'vue-count-to'
  export default {
    name: 'itemRightTop',
    components: { countTo },
    data() {
      return {
        total: 1200,
        list: [
          { label: '正高', value: 480 },
          { label: '副高', value: 840 },
        ]
      }
    },
    mounted() {
    },
    methods: {
      formatWidth(val, total){
        return (val / total).toFixed(4) * 100 + '%'
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    background: rgba(0,16,43,0.32); border: 1px solid; border-image: linear-gradient(to bottom, rgba(8,132,255, .1), rgba(8,132,255,1)) 1;
    overflow: hidden;
    .bigTit {
      height: 42px; font-size: 24px; font-family: PingFangSC; font-weight: bold; letter-spacing: 1.96px;
      background: url('~@/assets/img/boxBg.svg') -1px top no-repeat;
      display: flex; align-items: center;
      span { margin-left: 40px;}
    }
    ._body {
      padding: 16px; height: 244px; overflow: hidden;
      .total {
        width: 100%; height: 80px; background: rgba(0,43,83,0.40);
        border: 1px solid rgba(0,186,255,0.5); border-radius: 8px;
        box-shadow: inset 0 0 20px 0 rgba(0,186,255,0.5);
        display: flex; align-items: center; justify-content: center;
        .img {
          position: relative;
          img:nth-child(1){ position: absolute; width: 24px; height: 24px; left: 50%; margin-left: -12px; z-index: 2; }
          img:nth-child(2){ width: 81px; height: 64px; }
        }
        .inner {
          display: flex; align-items: center;
          margin-left: 30px;
          font-size: 16px; font-family: PingFangSC;
          .val { font-size: 24px; font-family: DINPro; font-weight: 600; margin-right: 8px; }
        }

      }
      ._progress {
        .item {
          padding-top: 20px;
          .text {
            display: flex; align-items: center; justify-content: space-between;
            padding-bottom: 10px;
            .label { font-size: 16px; font-family: PingFangSC; }
            .value {
              font-size: 20px; font-family: DINPro;
              span {
                font-size: 16px; font-family: PingFangSC; margin-left: 6px;
              }
            }
          }
          ._bar {
            width: 100%; height: 8px; background-color: rgba(0,183,254,.2);
            &:before {
              content: ''; display: block; width: 0;
              background: linear-gradient(270deg, #63F3FF 0%, #47A4FF 100%)!important; height: 100%;
              animation: progress 2s; animation-delay: 0.5s; animation-fill-mode: forwards;
            }

            @keyframes progress {
              from {
                width: 0;
              }
              to {
                width: var(--width);
              }
            }
          }
          &:nth-child(2){
            ._bar:before {
              background: rgba(0,149,255,1)!important;
            }
          }
        }
      }
    }
  }
</style>
